<template>
  <div>
    <h1>Recommendations</h1>
    <div v-for="recommendation in recommendations" :key="recommendation.id">
      {{ recommendation.userBehavior }}
    </div>
    <h2>Add New Recommendation</h2>
    <form @submit.prevent="handleCreateRecommendation">
      <div>
        <label>UserID:</label>
        <input type="text" v-model="newRecommendation.userId">
      </div>
      <div>
        <label>ResourceID:</label>
        <input type="text" v-model="newRecommendation.resourceID">
      </div>
      <div>
        <label>User Behavior:</label>
        <input type="text" v-model="newRecommendation.userBehavior">
      </div>
      <div>
        <label>Enable Feedback:</label>
        <input type="checkbox" v-model="newRecommendation.enableFeedback">
      </div>
      <button type="submit">Add Recommendation</button>
    </form>
  </div>
</template>

<script>
import { ref, onMounted, reactive } from 'vue';
import { getRecommendations, createRecommendation } from '../api/recommendationApi';

export default {
  setup() {
    const recommendations = ref([]);
    const newRecommendation = reactive({
      userId: '',
      resourceID: '',
      userBehavior: '',
      enableFeedback: false
    });
    const loading = ref(false);
    const error = ref(null);

    onMounted(async () => {
      try {
        loading.value = true;
        const data = await getRecommendations();
        recommendations.value = data;
      } catch (err) {
        error.value = err.message;
      } finally {
        loading.value = false;
      }
    });

    const handleCreateRecommendation = async () => {
      try {
        loading.value = true;
        const newRecommendationData = await createRecommendation({
          userId: parseInt(newRecommendation.userId),
          resourceID: parseInt(newRecommendation.resourceID),
          userBehavior: newRecommendation.userBehavior,
          enableFeedback: newRecommendation.enableFeedback
        });
        recommendations.value.push(newRecommendationData);
        newRecommendation.userId = '';
        newRecommendation.resourceID = '';
        newRecommendation.userBehavior = '';
        newRecommendation.enableFeedback = false;
        error.value = '';
      } catch (err) {
        error.value = err.message;
      } finally {
        loading.value = false;
      }
    };

    return {
      recommendations,
      newRecommendation,
      loading,
      error,
      handleCreateRecommendation
    };
  }
};
</script>

<style>
/* Your CSS styles here */
</style>